<template>
  <div style="height: 100%" class="bg-white border-solid border-2 border-white flex flex-col">
    <cuisine-type-list @selectType="selectType" />
    <!--          style="background-color: #fafafa"-->
    <div style="background-color: rgba(0, 0, 0, 0.05)" class="bg-gray-200 p-1 flex-1">
      <a-list
        :grid="{ gutter: [10, { xs: 8, sm: 10, md: 10, lg: 10 }], column: 5 }"
        :pagination="pagination"
        :data-source="cuisineListPage.records"
      >
        <template #renderItem="{ item }">
          <a-list-item
            class="bg-white transition duration-500 ease-in-out transform hover: hover:scale-105"
            @click="selectedCuisine(item)"
          >
            <div style="height: 200px" class="flex flex-col justify-between">
              <img class="h-2/3" :src="item.firstImgUrl" alt="" />
              <div class="h-1/3 p-2 pt-0 flex flex-col justify-between">
                <div class="text-lg">{{ item.name }}</div>
                <div class="text-red-400 font-medium">￥{{ item.money }}</div>
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref } from 'vue';
  import CuisineTypeList from './components/CuisineTypeList.vue';
  import { getListPage } from '/@/api/cuisine/cuisine';
  import { buildUUID } from '/@/utils/uuid';
  import ImagePreview from '/@/components/Preview/src/Functional.vue';

  export default defineComponent({
    name: 'Cuisine',
    components: { ImagePreview, CuisineTypeList },
    props: {
      cuisines: Object,
    },
    emits: ['update:cuisines'],
    setup(props) {
      onMounted(() => {
        fetch({});
      });
      let cuisineListPage: any = ref<any>({});
      async function fetch(params: object) {
        cuisineListPage.value = await getListPage(params);
        console.log(cuisineListPage);
      }

      function selectType(id: string) {
        fetch({ cuisineTypeId: id });
      }

      const pagination = {
        onChange: (page: number) => {},
        pageSize: 10,
      };

      const { cuisines } = props;

      /*const cuisines = reactive({
        selectedCuisineList: new Array<SelectedCuisine>(),
        cuisine: {} as SelectedCuisine,
      });*/

      function selectedCuisine(cuisine: object) {
        let { id: cuisineId, name, money = 0.0 } = cuisine;
        cuisines.selectedCuisineList.push({ uuId: buildUUID(), cuisineId, name, number: 1, money });
        if (cuisines.selectedCuisineList.length == 1) {
          cuisines.cuisine = cuisines.selectedCuisineList[0];
        }
      }

      return {
        pagination,
        selectType,
        cuisineListPage,
        cuisines,
        selectedCuisine,
      };
    },
  });
</script>

<style lang="less" scoped>
  /deep/ .ant-list-grid .ant-col > .ant-list-item {
    margin-bottom: 0;
  }

  .selected-background {
    background-color: #e4e4e7;
  }

  /* /deep/ .ant-card-body {
padding: 16px 16px 0 16px;
}*/
</style>
